<style lang="scss" scoped>
    .info{
        &:hover{
            color:#f90;
            text-decoration:underline;
        }
    }
</style>
<template>
    <ui-main title="树形菜单" no-padding >
        <div>
            <div style="background: #F3F4F6;" class="p-20 ui flex row-center">
                <div class="w-70p">
                    <el-tree-list ref="tree"
                        :top-bar="{title: '全部用例（123）', filter: '搜索用例', button: '添加用例' }"
                        :node-bar="{addBtn: '创建用例', input: '请输用例名称', innerBtn: '创建完整用例', innerBar: true}"
                        :expand-on-click-node="false"
                        show-checkbox
                        :data="data6"
                        node-key="id"
                        default-expand-all
                        @node-drag-start="handleDragStart"
                        @node-drag-enter="handleDragEnter"
                        @node-drag-leave="handleDragLeave"
                        @node-drag-over="handleDragOver"
                        @node-drag-end="handleDragEnd"
                        @node-drop="handleDrop"
                        draggable
                        :allow-drop="allowDrop"
                        :allow-drag="allowDrag"
                        :edit-leaf="editLeaf"
                        :add-case="addCase"
                        :add-root="addCase">
                        <!--eslint-disable-next-line-->
                        <div class="w-100p" slot-scope="{node,data}">
                            <span v-if="!node.isLeaf"><i class="el-icon-file"></i>&nbsp;<strong>{{ node.label }}</strong></span>
                            <span v-if="node.isLeaf"><i class="el-icon-document"></i>&nbsp;<a @click="addCase"
                                href="javascript:"
                                class="dis-i-b info"
                                style="width:40px"
                                title="查看用例详情"> C{{ node.id }}</a>{{ node.label }}</span>
                            <span v-if="!node.isLeaf" class="fl-r p-r-10"> 测试次数 </span>
                            <span v-if="node.isLeaf" class="fl-r p-r-30"> 0 </span>
                        </div>
                    </el-tree-list>
                </div>
            </div>
            <div class="p-20">
                <ui-load-md file="tree-menu-list"></ui-load-md>
            </div></div>

    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                data6: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2',
                        children: [{
                            id: 11,
                            label: '三级 3-2-1'
                        }, {
                            id: 12,
                            label: '三级 3-2-2'
                        }, {
                            id: 13,
                            label: '三级 3-2-3'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                filterText:''
            };
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                if (data.label && data.label.indexOf(value) !== -1) {
                    return true
                }
                let pinyinCode = data.pinyin_code || data.pinyinCode;
                if (pinyinCode) {// 拼音检索
                    const py = pinyinCode.toLowerCase()
                    const v = value.toLowerCase()
                    if (py.indexOf(v) !== -1) {
                        return true
                    }
                }
                return false
            },
            editLeaf(e) {
                this.$bui.drawer({
                    comp: () => import('./_test.vue'),
                    params: {
                        title: e.label
                    }
                })
            },
            addCase(e) {
                this.$bui.drawer({
                    comp: () => import('./_test.vue'),
                    params: {
                        title: e.label
                    }
                })
            },
            handleDragStart(node, ev) {
                this.log('drag start', node);
            },
            handleDragEnter(draggingNode, dropNode, ev) {
                this.log('tree drag enter: ', dropNode.label);
            },
            handleDragLeave(draggingNode, dropNode, ev) {
                this.log('tree drag leave: ', dropNode.label);
            },
            handleDragOver(draggingNode, dropNode, ev) {
                this.log('tree drag over: ', dropNode.label);
            },
            handleDragEnd(draggingNode, dropNode, dropType, ev) {
                this.log('tree drag end: ', dropNode && dropNode.label, dropType);
            },
            handleDrop(draggingNode, dropNode, dropType, ev) {
                this.log('tree drop: ', dropNode.label, dropType);
            },
            allowDrop(draggingNode, dropNode, type) {
                if (dropNode.data.label === '二级 3-1') {
                    return type !== 'inner';
                }else{
                    return true;
                }
            },
            allowDrag(draggingNode) {
                return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
            }
        }
    };
</script>
